<template>
  <div class="box">
    <div id="" style="margin-bottom: 20px;">
      <el-button :type="type=='事件监测引擎'?'primary':''" v-has @click="type='事件监测引擎'">事件监测引擎</el-button>
      <el-button :type="type=='监测分析'?'primary':''" v-has @click="type='监测分析'">监测分析</el-button>
      <el-button :type="type=='告警结果'?'primary':''" v-has @click="type='告警结果'">告警结果</el-button>
    </div>
    <!-- <div v-if="type=='事件监测引擎'" style="margin-bottom:20px;"><el-button type="primary">新增</el-button></div> -->
    <template v-if="type=='事件监测引擎'">
      <el-table ref="multipleTable" :data="tableData1" border tooltip-effect="dark" fit stripe highlight-current-row>
        <el-table-column type="selection"></el-table-column>
        <el-table-column v-for="item in tableHead1" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template v-slot="scope">
            <div v-if="item.title!='oper1'">
              {{scope.row[item.title]}}
            </div>
            <div v-else>
              <el-button type="primary" size="mini">添加</el-button>
              <el-button type="primary" size="mini">修改</el-button>
              <el-button type="primary" size="mini">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="type=='监测分析'">
      <el-table ref="multipleTable" :data="tableData2" border tooltip-effect="dark" fit stripe highlight-current-row>
        <el-table-column type="selection"></el-table-column>
        <el-table-column v-for="item in tableHead2" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template v-slot="scope">
            <div v-if="item.title!='oper2'">
              {{scope.row[item.title]}}
            </div>
            <div v-else>
              <el-button type="primary" size="mini">明细查询</el-button>
              <el-button type="primary" size="mini">明细统计</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="type=='告警结果'">
      <el-table ref="multipleTable" :data="tableData3" border tooltip-effect="dark" fit stripe highlight-current-row>
        <el-table-column type="selection"></el-table-column>
        <el-table-column v-for="item in tableHead3" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template v-slot="scope">
            <div v-if="item.title!='status'">
              {{scope.row[item.title]}}
            </div>
            <div v-else>
              <el-button type="danger" size="mini" v-if="scope.row[item.title]=='未处理'"
                @click="scope.row[item.title]='已处理'">处理</el-button>
              <el-button type="primary" size="mini" v-if="scope.row[item.title]!='未处理'">已处理</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        ruleForm: {},
        formData: {},
        ruleForm1: {},
        formData1: {},
        ruleForm2: {},
        formData2: {},
        fileList: [],
        type: '数据导入',
        tableHead1: [{
            id: 1,
            label: "数据名称",
            title: "name",
          },
          {
            id: 2,
            label: "分级",
            title: "level",
          },
          {
            id: 3,
            label: "数据类型",
            title: "type",
          },
          {
            id: 4,
            label: "操作类型",
            title: "operType",
          },
          {
            id: 5,
            label: "所属行业",
            title: "industy",
          },
          {
            id: 6,
            label: "来源",
            title: "source",
          },
          {
            id: 7,
            label: "数据存储位置",
            title: "position",
          },
          {
            id: 8,
            label: "所属机构",
            title: "dept",
          },
          {
            id: 9,
            label: "操作时间",
            title: "time",
          }
        ],
        tableData1: [{
            name: "single.txt",
            level: "二级",
            type: "文件",
            operType: '发布',
            industy: "农、林牧、渔业",
            source: "single",
            position: "重庆市",
            dept: "重庆市",
            time: "2021-10-26 14:32:57"
          },
          {
            name: "03Pptx文档发布",
            level: "二级",
            type: "文件",
            operType: '发布',
            industy: "农、林牧、渔业",
            source: "03Pptx文档发布",
            position: "重庆市",
            dept: "重庆市",
            time: "2021-10-26 14:35:07"
          },
          {
            name: "02Xlsx文档发布",
            level: "二级",
            type: "文件",
            operType: '发布',
            industy: "农、林牧、渔业",
            source: "02Xlsx文档发布",
            position: "重庆市",
            dept: "重庆市",
            time: "2021-05-26 13:28:57"
          }
        ],

        formData: {},

        tableHead2: [{
            id: 1,
            label: "应用名称",
            title: "appName",
          },
          {
            id: 2,
            label: "应用IP",
            title: "ip",
          },
          {
            id: 3,
            label: "审计数据安全等级",
            title: "level",
          },
          {
            id: 4,
            label: "数据发布方",
            title: "pubsish",
          },
          {
            id: 5,
            label: "违规类型",
            title: "illegalType",
          },
          {
            id: 6,
            label: "违规原因描述",
            title: "illegalDesc",
          },
          {
            id: 7,
            label: "风险程度",
            title: "risk",
          },
          {
            id: 8,
            label: "违规时间",
            title: "time",
          }
        ],
        tableData2: [{
          appName: "外部应用-001",
          ip: '192.168.0.235',
          level: '无',
          pubsish: '重庆市',
          illegalType: '数据使用违规',
          illegalDesc: '数据打标失败',
          risk: '中风险',
          time: '2021-10-26'
        }],
        tableHead3: [{
            id: 1,
            label: "消息内容",
            title: "msg",
          },
          {
            id: 2,
            label: "消息类型",
            title: "type",
          },
          {
            id: 3,
            label: "提交时间",
            title: "time",
          },
          {
            id: 4,
            label: "处理状态",
            title: "status",
          }
        ],
        tableData3: [{
          msg: "服务调用失败",
          type: '预警',
          time: '2021-10-26 14:45:07',
          status: '未处理'
        }]

      };
    },
    computed: {
      uploadFile() {
        return process.env.VUE_APP_BASE_API + "/dc/importCustomer";
      },
      headers() {
        const head = {
          token: this.$store.getters.token,
        };
        return head;
      },
    },
    methods: {
      submitForm() {
        this.$message({
          type: "success",
          message: '上传目录成功'
        })
      },
      resetForm() {

      }
    }
  }
</script>

<style lang="scss" scoped>
  .box {
    padding: 30px;
  }
</style>
